<template>
  <div class="bg-light">
    <Tabs v-model="tab">
      <TabPane :name="'tab' + (index + 1)" :label="list.length === 1 ? '赠品信息' : (index === 0 ? '一' : (index === 1 ? '二' : '三')) + '阶赠品'" v-for="(item, index) in list" :key="item.id">
        <div>
          <table  cellspacing="0" class="table">
            <thead>
              <tr>
                <th width="20"></th>
                <th v-for="column in listData.columns" :key="column.id" :width="column.width">{{column.title}}</th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="outer">
          <div class="inner">
            <div class="fixedHegiht">
              <table cellspacing="0" class="table">
                <tbody v-for="gift in item" :key="gift.id">
                  <tr>
                    <td width="20">
                      <Icon type="ios-arrow-down" size="20" v-if="gift.showChildren" class="ml cursor" @click="onShowChild(gift)"></Icon>
                      <Icon type="ios-arrow-forward" size="20" v-if="gift.children && gift.children.length && !gift.showChildren" @click="onShowChild(gift)" class="ml cursor"></Icon>
                    </td>
                    <td width="150">{{gift.code}}</td>
                    <td width="150">{{gift.skuCode}}</td>
                    <td width="450"><div class="flexLeft"><img :src="gift.img" alt=""><div class="e2">{{gift.name}}</div></div></td>
                    <td class="font-red">{{gift.price}}</td>
                  </tr>
                  <tr v-if="gift.children && gift.children.length" v-for="child in gift.children" :key="child.id" v-show="gift.showChildren">
                    <td></td>
                    <td>-</td>
                    <td>{{child.skuCode}}</td>
                    <td><div class="flexLeft"><img :src="child.img" alt=""><div class="e2">{{child.name}}</div></div></td>
                    <td class="font-red">{{child.price | currency(true)}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import listData from './GiftProductData';
export default {
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      listData: listData,
      tab: 'tab1',
    }
  },
  methods: {
    onShowChild(item) {
      item.showChildren = !item.showChildren;
    }
  }
}
</script>

